import { useEffect, useMemo, useState } from "react";

export default function SystemsCreationSite() {
  const pages = useMemo(
    () => ({
      home: {
        label: "Home",
        href: "/",
        title: "AI Systems Creation | AI, SaaS, and Web Consulting",
        description:
          "Systems Creation helps businesses grow with AI consulting, SaaS strategy, and modern web experiences.",
      },
      services: {
        label: "Services",
        href: "/services",
        title: "Services | AI Systems Creation",
        description:
          "Explore AI strategy, SaaS consulting, and web design services from Systems Creation.",
      },
      about: {
        label: "About",
        href: "/about",
        title: "About | AI Systems Creation",
        description:
          "Learn how Systems Creation helps businesses modernize with strategy, execution, and scalable systems.",
      },
      contact: {
        label: "Contact",
        href: "/contact",
        title: "Contact | AI Systems Creation",
        description:
          "Connect with Systems Creation to discuss AI, SaaS, web, and growth consulting needs.",
      },
      privacy: {
        label: "Privacy Policy",
        href: "/privacy-policy",
        title: "Privacy Policy | AI Systems Creation",
        description: "Read the privacy policy for Systems Creation.",
      },
    }),
    []
  );

  const [currentPath, setCurrentPath] = useState("/");

  useEffect(() => {
    const syncPath = () => setCurrentPath(window.location.pathname || "/");
    syncPath();
    window.addEventListener("popstate", syncPath);
    return () => window.removeEventListener("popstate", syncPath);
  }, []);

  useEffect(() => {
    const page = Object.values(pages).find((item) => item.href === currentPath) || pages.home;
    document.title = page.title;
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute("content", page.description);
    }
  }, [currentPath, pages]);

  const socialLinks = [
    { label: "LinkedIn", href: "https://www.linkedin.com" },
    { label: "X", href: "https://x.com" },
    { label: "Facebook", href: "https://www.facebook.com" },
    { label: "Instagram", href: "https://www.instagram.com" },
  ];

  const services = [
    {
      title: "AI Strategy & Automation",
      description:
        "Design practical AI roadmaps, workflow automation, business process improvements, and adoption plans that create measurable efficiency.",
      outcomes: ["Workflow automation", "AI opportunity mapping", "Operational efficiency"],
    },
    {
      title: "SaaS Product Consulting",
      description:
        "Validate product direction, refine feature priorities, improve UX, and align technical execution with revenue and retention goals.",
      outcomes: ["Product strategy", "Roadmapping", "Growth alignment"],
    },
    {
      title: "Web Design & Development",
      description:
        "Build modern, conversion-focused websites and digital experiences that communicate value clearly and turn visitors into qualified leads.",
      outcomes: ["Modern websites", "Lead generation", "Brand credibility"],
    },
  ];

  const processSteps = [
    {
      step: "01",
      title: "Discover",
      text: "We assess goals, audience, pain points, systems, and opportunities to define the right direction.",
    },
    {
      step: "02",
      title: "Design",
      text: "We build a focused roadmap, messaging structure, and delivery plan aligned to growth and usability.",
    },
    {
      step: "03",
      title: "Deliver",
      text: "We launch polished solutions, refine performance, and help create a stronger long-term digital foundation.",
    },
  ];

  const insights = [
    "AI-enabled operations",
    "Scalable SaaS growth planning",
    "Conversion-focused web strategy",
    "Business-first technical execution",
  ];

  function navigate(href) {
    window.history.pushState({}, "", href);
    setCurrentPath(href);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function NavLink({ href, children, className = "" }) {
    const isActive = currentPath === href;
    return (
      <button
        type="button"
        onClick={() => navigate(href)}
        className={`transition hover:text-white ${isActive ? "text-white" : "text-slate-300"} ${className}`}
      >
        {children}
      </button>
    );
  }

  function LogoMark() {
    return (
      <button type="button" onClick={() => navigate("/")} className="flex items-center gap-3 text-left">
        <div className="h-11 w-11 overflow-hidden rounded-2xl border border-slate-700 bg-slate-900 shadow-lg">
          <img
            src="sandbox:/mnt/data/SystemsCreationLogo2026V1.png"
            alt="Systems Creation logo"
            className="h-full w-full object-cover"
          />
        </div>
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.22em] text-emerald-400">
            AI Systems Creation
          </p>
          <p className="text-lg font-bold leading-none text-white">Systems Creation</p>
        </div>
      </button>
    );
  }

  function SiteHeader() {
    return (
      <header className="sticky top-0 z-40 border-b border-white/10 bg-slate-950/85 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          <LogoMark />
          <nav className="hidden items-center gap-8 text-sm md:flex">
            <NavLink href="/">Home</NavLink>
            <NavLink href="/services">Services</NavLink>
            <NavLink href="/about">About</NavLink>
            <NavLink href="/contact">Contact</NavLink>
          </nav>
          <button
            type="button"
            onClick={() => navigate("/contact")}
            className="rounded-2xl bg-emerald-400 px-5 py-3 text-sm font-semibold text-slate-950 shadow-lg transition hover:-translate-y-0.5"
          >
            Learn More
          </button>
        </div>
      </header>
    );
  }

  function SiteFooter() {
    return (
      <footer className="border-t border-white/10 bg-slate-950">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 py-12 lg:grid-cols-4 lg:px-8">
          <div className="space-y-4 lg:col-span-2">
            <LogoMark />
            <p className="max-w-xl text-sm leading-7 text-slate-400">
              Systems Creation helps organizations modernize with AI consulting, SaaS strategy, web development, and practical digital systems built for long-term growth.
            </p>
          </div>

          <div>
            <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-200">Contact</h3>
            <div className="mt-4 space-y-2 text-sm text-slate-400">
              <p>
                Sales: <a className="hover:text-white" href="mailto:sales@systemscreation.com">sales@systemscreation.com</a>
              </p>
              <p>
                Info: <a className="hover:text-white" href="mailto:info@systemscreation.com">info@systemscreation.com</a>
              </p>
              <p>
                Learn more: <a className="hover:text-white" href="mailto:info@systemscreation.com">info@systemscreation.com</a>
              </p>
            </div>
          </div>

          <div>
            <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-200">Company</h3>
            <div className="mt-4 space-y-2 text-sm text-slate-400">
              <button type="button" onClick={() => navigate("/about")} className="block hover:text-white">About</button>
              <button type="button" onClick={() => navigate("/services")} className="block hover:text-white">Services</button>
              <button type="button" onClick={() => navigate("/contact")} className="block hover:text-white">Contact</button>
              <button type="button" onClick={() => navigate("/privacy-policy")} className="block hover:text-white">Privacy Policy</button>
            </div>
          </div>
        </div>

        <div className="border-t border-white/10">
          <div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-6 text-sm text-slate-500 md:flex-row md:items-center md:justify-between lg:px-8">
            <p>© 2026 Systems Creation. All rights reserved.</p>
            <div className="flex flex-wrap gap-4">
              {socialLinks.map((link) => (
                <a key={link.label} href={link.href} className="hover:text-white">
                  {link.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    );
  }

  function PageShell({ eyebrow, title, description, children, cta = true }) {
    return (
      <main>
        <section className="relative overflow-hidden border-b border-white/10">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(52,211,153,0.18),transparent_28%),radial-gradient(circle_at_left,rgba(59,130,246,0.15),transparent_30%)]" />
          <div className="relative mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
            <div className="max-w-3xl space-y-6">
              <div className="inline-flex rounded-full border border-emerald-400/30 bg-emerald-400/10 px-4 py-2 text-sm text-emerald-300">
                {eyebrow}
              </div>
              <h1 className="text-5xl font-black tracking-tight text-white md:text-6xl">{title}</h1>
              <p className="max-w-2xl text-lg leading-8 text-slate-300">{description}</p>
              {cta ? (
                <div className="flex flex-col gap-4 sm:flex-row">
                  <button
                    type="button"
                    onClick={() => navigate("/contact")}
                    className="rounded-2xl bg-emerald-400 px-6 py-4 text-center font-semibold text-slate-950 shadow-lg transition hover:-translate-y-0.5"
                  >
                    Get Started
                  </button>
                  <a
                    href="mailto:info@systemscreation.com"
                    className="rounded-2xl border border-white/15 px-6 py-4 text-center font-semibold text-white transition hover:bg-white/5"
                  >
                    Contact Info
                  </a>
                </div>
              ) : null}
            </div>
          </div>
        </section>
        {children}
      </main>
    );
  }

  function HomePage() {
    return (
      <PageShell
        eyebrow="AI · SaaS · Web Consulting"
        title="Building smarter digital systems for modern businesses."
        description="AI Systems Creation helps companies turn complex ideas into scalable digital solutions through AI consulting, SaaS product strategy, and modern web development."
      >
        <section className="mx-auto grid max-w-7xl gap-12 px-6 py-20 lg:grid-cols-2 lg:px-8">
          <div className="space-y-8">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
                <p className="text-sm uppercase tracking-[0.2em] text-slate-400">Focus</p>
                <p className="mt-3 text-2xl font-bold text-white">Automation</p>
                <p className="mt-2 text-sm leading-7 text-slate-400">Streamline repetitive work and unlock faster execution.</p>
              </div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
                <p className="text-sm uppercase tracking-[0.2em] text-slate-400">Built For</p>
                <p className="mt-3 text-2xl font-bold text-white">Growth</p>
                <p className="mt-2 text-sm leading-7 text-slate-400">Create a scalable digital foundation for sales and operations.</p>
              </div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-5 sm:col-span-2">
                <p className="text-sm uppercase tracking-[0.2em] text-slate-400">What We Deliver</p>
                <p className="mt-3 text-xl font-bold text-white">Strategy backed by execution-ready design and development.</p>
                <p className="mt-2 text-sm leading-7 text-slate-400">
                  From AI adoption planning to SaaS growth strategy and lead-generation websites, Systems Creation builds digital systems that work together.
                </p>
              </div>
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-2xl">
            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-emerald-400">What standard business pages need</p>
            <h2 className="mt-4 text-3xl font-bold text-white">A complete foundation for future pages.</h2>
            <div className="mt-6 grid gap-3">
              {insights.map((item) => (
                <div key={item} className="rounded-2xl border border-white/10 bg-slate-900/70 px-4 py-4 text-sm text-slate-300">
                  {item}
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="max-w-2xl space-y-4">
            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-emerald-400">Services</p>
            <h2 className="text-3xl font-bold text-white md:text-4xl">Consulting built to simplify complexity.</h2>
            <p className="text-lg leading-8 text-slate-400">
              We help organizations evaluate opportunities, build the right systems, and create a stronger digital presence.
            </p>
          </div>
          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {services.map((service) => (
              <div key={service.title} className="rounded-[1.75rem] border border-white/10 bg-white/5 p-7 shadow-xl">
                <h3 className="text-xl font-bold text-white">{service.title}</h3>
                <p className="mt-4 text-sm leading-7 text-slate-400">{service.description}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="border-y border-white/10 bg-white/[0.03]">
          <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
            <div className="max-w-2xl space-y-4">
              <p className="text-sm font-semibold uppercase tracking-[0.24em] text-emerald-400">Process</p>
              <h2 className="text-3xl font-bold text-white md:text-4xl">A simple path from idea to execution.</h2>
            </div>
            <div className="mt-10 grid gap-6 md:grid-cols-3">
              {processSteps.map((step) => (
                <div key={step.step} className="rounded-[1.75rem] border border-white/10 bg-slate-900/80 p-7">
                  <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Step {step.step}</p>
                  <p className="mt-4 text-lg font-semibold text-white">{step.title}</p>
                  <p className="mt-3 text-sm leading-7 text-slate-400">{step.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </PageShell>
    );
  }

  function ServicesPage() {
    return (
      <PageShell
        eyebrow="Services"
        title="Advisory and execution for AI, SaaS, and web growth."
        description="Systems Creation delivers focused consulting and implementation support to help businesses launch faster, improve operations, and strengthen their digital presence."
      >
        <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="grid gap-6">
            {services.map((service) => (
              <div key={service.title} className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-xl">
                <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr] lg:items-start">
                  <div>
                    <h2 className="text-2xl font-bold text-white">{service.title}</h2>
                    <p className="mt-4 max-w-3xl text-base leading-8 text-slate-400">{service.description}</p>
                  </div>
                  <div className="rounded-2xl border border-white/10 bg-slate-900/70 p-5">
                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Key outcomes</p>
                    <div className="mt-4 space-y-3">
                      {service.outcomes.map((outcome) => (
                        <div key={outcome} className="rounded-xl border border-white/10 px-3 py-3 text-sm text-slate-300">
                          {outcome}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </PageShell>
    );
  }

  function AboutPage() {
    return (
      <PageShell
        eyebrow="About Systems Creation"
        title="A consulting partner built for practical transformation."
        description="Systems Creation combines strategic thinking with technical execution to help businesses adopt AI, improve SaaS products, and launch web experiences that perform."
      >
        <section className="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:px-8">
          <div className="space-y-5 text-base leading-8 text-slate-300">
            <p>
              We focus on business outcomes first. That means better systems, clearer messaging, stronger user experiences, and solutions that support revenue and operational scale.
            </p>
            <p>
              Whether you need a roadmap, site refresh, product strategy, AI workflow plan, or a smarter digital foundation, Systems Creation helps turn ideas into structured, usable systems.
            </p>
          </div>
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-xl">
            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-emerald-400">Why clients work with us</p>
            <div className="mt-6 space-y-4 text-sm leading-7 text-slate-300">
              <div className="rounded-2xl border border-white/10 bg-slate-900/70 p-4">Clear strategic direction with execution in mind.</div>
              <div className="rounded-2xl border border-white/10 bg-slate-900/70 p-4">Modern, credible design for B2B decision-makers.</div>
              <div className="rounded-2xl border border-white/10 bg-slate-900/70 p-4">Reusable structure for future pages and site expansion.</div>
              <div className="rounded-2xl border border-white/10 bg-slate-900/70 p-4">Messaging aligned to trust, conversion, and growth.</div>
            </div>
          </div>
        </section>
      </PageShell>
    );
  }

  function ContactPage() {
    return (
      <PageShell
        eyebrow="Contact"
        title="Let’s build something smarter together."
        description="Tell us what you are building, what is slowing you down, or where you want to grow next."
      >
        <section className="mx-auto max-w-4xl px-6 py-20 lg:px-8">
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-2xl md:p-10">
            <div className="grid gap-8 md:grid-cols-2">
              <div>
                <h2 className="text-2xl font-bold text-white">Start the conversation</h2>
                <p className="mt-4 text-base leading-8 text-slate-400">
                  Reach out for AI consulting, SaaS advisory, web strategy, or a broader digital modernization discussion.
                </p>
                <div className="mt-6 space-y-3 text-sm text-slate-300">
                  <p>
                    Sales: <a href="mailto:sales@systemscreation.com" className="hover:text-white">sales@systemscreation.com</a>
                  </p>
                  <p>
                    Information: <a href="mailto:info@systemscreation.com" className="hover:text-white">info@systemscreation.com</a>
                  </p>
                </div>
              </div>
              <form className="grid gap-5">
                <input
                  type="text"
                  placeholder="Full Name"
                  className="rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-400"
                />
                <input
                  type="email"
                  placeholder="Email Address"
                  className="rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-400"
                />
                <input
                  type="text"
                  placeholder="Company Name"
                  className="rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-400"
                />
                <textarea
                  placeholder="Tell us about your project"
                  rows={5}
                  className="rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-400"
                />
                <button
                  type="submit"
                  className="rounded-2xl bg-emerald-400 px-6 py-4 font-semibold text-slate-950 shadow-lg transition hover:-translate-y-0.5"
                >
                  Submit Inquiry
                </button>
              </form>
            </div>
          </div>
        </section>
      </PageShell>
    );
  }

  function PrivacyPage() {
    return (
      <PageShell
        eyebrow="Privacy Policy"
        title="Privacy and information handling."
        description="This sample policy page gives your site a standard trust-building section and can be expanded with final legal language later."
        cta={false}
      >
        <section className="mx-auto max-w-4xl px-6 py-20 lg:px-8">
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-xl">
            <div className="space-y-6 text-sm leading-8 text-slate-300">
              <p>
                Systems Creation may collect contact details and project information submitted through the website for the purpose of responding to inquiries and providing requested services.
              </p>
              <p>
                We may use submitted information to communicate with prospective clients, improve our website experience, and maintain internal business records.
              </p>
              <p>
                This sample page should be reviewed and finalized with your preferred legal language, cookie disclosures, data retention terms, and jurisdiction-specific requirements.
              </p>
              <p>
                For privacy-related questions, contact <a href="mailto:info@systemscreation.com" className="text-emerald-300 hover:text-white">info@systemscreation.com</a>.
              </p>
            </div>
          </div>
        </section>
      </PageShell>
    );
  }

  function renderPage() {
    switch (currentPath) {
      case "/services":
        return <ServicesPage />;
      case "/about":
        return <AboutPage />;
      case "/contact":
        return <ContactPage />;
      case "/privacy-policy":
        return <PrivacyPage />;
      default:
        return <HomePage />;
    }
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <SiteHeader />
      {renderPage()}
      <SiteFooter />
    </div>
  );
}